<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    div {
        width: 300px;
        height: 300px;
        background: red;
        /* display: none; */
        /* position: absolute; */
    }
</style>
<body>
    <!-- 显示和隐藏 -->
    <!-- <button>显示</button>
    <button>隐藏</button>
    <div></div>

    <button>显示/隐藏</button>
    <div></div> -->



    <!-- 淡入淡出 -->
    <!-- <button>淡出</button>
    <div></div> -->

    <!-- <button>淡入</button>
    <div></div> -->

    <!-- <button>淡入</button>
    <div></div> -->
    
    <!-- 透明度 -->
    <!-- <button>透明度</button>
    <div></div> -->



    <!-- 滑动 -->
    <!-- <button>滑出</button>
    <div></div> -->

    <!-- <button>滑入</button>
    <div></div> -->

    <!-- <button>滑入滑出</button>
    <div></div> -->



    <!-- 动画 -->
    <!-- <button>开始动画</button>
    <div>你好</div> -->



    <!-- 停止动画 -->
    <!-- <button>开始动画</button>
    <button>停止动画</button>
    <div></div> -->



    <!-- 链 -->
    <!-- <button>点我</button>
    <p>我是你的小宝贝吗？</p> -->



    <!-- 捕获 -->
    <!-- <button>显示TEXT文本</button>
    <button>显示HTML文本</button>
    <p>我是你的<b>小宝贝</b>吗？</p> -->



    <!-- 添加元素 -->
    <!-- <button>添加文本</button>
    <button>添加列表</button>
    <p>我是大哥</p>
    <ol>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
    </ol> -->



    <!-- 删除元素 -->
    <!-- <button>移除div元素</button>
    <div>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    </div> -->
</body>
<script>
    // 显示和隐藏
    // 隐藏
    // $('button:last').click(function(){
    //     $('div').hide()
    // })
    // 显示
    // $('button:first').click(function(){
    //     $('div').show()
    // })
    // 显示加隐藏
    // $('button').click(function(){
    //     $('div').toggle()
    // })



    // 淡入淡出
    // 淡出
    // $('button').click(function(){
    //     $('div').fadeIn(3000)
    // })
    // 淡入
    // $('button').click(function(){
    //     $('div').fadeOut(3000)
    // })
    // 淡入淡出
    // $('button').click(function(){
    //     $('div').fadeToggle(1000)
    // })
    // 透明度   值slow、fast或毫秒
    // $('button').click(function(){
    //     $('div').fadeTo(3000,0.3)
    // })



    // 滑动
    // 滑出
    // $('button').click(function(){
    //     $('div').slideDown(3000)
    // })
    // 滑入
    // $('button').click(function(){
    //     $('div').slideUp(3000)
    // })
    // 滑入滑出
    // $('button').click(function(){
    //     $('div').slideToggle(3000)
    // })



    // 动画
    // 盒子滑动
    // $('button').click(function(){
    //     $('div').animate({left:'1000',opacity:'0.5'},2000)
    //     $('div').animate({top:'500',opacity:'0.5'},2000)
    // })
    // 盒子滑动结束了文字开始变大
    // $('button').click(function(){
    //     $('div').animate({left:'520',opacity:'0.5'},2000)
    //     $('div').animate({fontSize:'3em'},2000)
    // })
    // 点一下按钮就变大一点
    // $('button').click(function(){
    //     $('div').animate({left:'250',width:'+=100px',height:'+=100px'},2000)
    // })



    // 停止动画
    // $('button:first').click(function(){
    //     $('div').slideUp(3000)
    // })
    // $('button:last').click(function(){
    //     $('div').stop()
    // })



    // 链
    // $('button').click(function(){
    //     $('p').css('color','red').slideUp(3000).slideDown(3000)
    // })



    // 捕获
    // $('button:first').click(function(){
    //     alert('Text:' + $('p').text())
    // })
    // $('button:last').click(function(){
    //     alert('Html:' + $('p').html())
    // })



    // 添加元素
    // 结尾插入内容
    // $('button:first').click(function(){
    //     $('p').append('你好我是二哥')
    // })
    // $('button:last').click(function(){
    //     $('ol').append('<li>我是</li>')
    // })
    // 开头插入内容
    // $('button:first').click(function(){
    //     $('p').prepend('你好我是二哥')
    // })
    // $('button:last').click(function(){
    //     $('ol').prepend('<li>我是</li>')
    // })
    // after() 方法在被选元素之后插入内容
    // before() 方法在被选元素之前插入内容
    // $('button:first').click(function(){
    //     $('p').before('你好我是二哥')
    // })
    // $('button:last').click(function(){
    //     $('ol').after('<li>我是</li>')
    // })



    // 删除元素
    // 删除整个div
    // $('button').click(function(){
    //     $('div').remove()
    // })
    // 删除div里面的内容
    // $('button').click(function(){
    //     $('div').empty()
    // })
</script>
</html>